<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="test"></div>
  <!-- 引入react核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <!-- 用于支持react操作DOM -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- 用于将jsx转为js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  
  <script type="text/babel">
    class Weather extends React.Component{
      constructor(props){
        super(props);
        //初始化状态
        this.state={isHot:false,wind:'微风'};
        //解决changeWeather中this指向问题
        this.changeWeather=this.changeWeather.bind(this)
      }
      render(){
        //读取状态
        // console.log(this);//render里的this是组件实例对象
        const {isHot,wind}=this.state;
        return <h1 onClick={this.changeWeather}>今天天气很{isHot? '炎热':'凉爽'},{wind}</h1>
      }
      changeWeather(){
        //changeWeather 放在 Weather 的原型对象上，供实例使用
        //由于 changeWeather 是作为onClick的回调，所以不是通过实例调用，而是直接调用
        //类中默认开启局部严格模式，所以changeWeather的this为undefined
        console.log(this);

        const isHot=this.state.isHot;
        // this.state.isHot=!isHot;//注意：不能直接修改state的值
        //严重注意：状态必须通过 setState 进行更新，且更新是一种合并，不是替换
        this.setState({isHot:!isHot});
      }
    }
    ReactDOM.render(<Weather/>,document.getElementById('test'))
  </script>
</body>
</html>